{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "remove_cell"
    ]
   },
   "outputs": [],
   "source": [
    "import datapane as dp"
   ]
  },
  {
   "attachments": {},
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Layout blocks take other blocks as parameters and lay them out. Interactive layout blocks (such as tabs and selects) don't require a backend server and can be used in standalone HTML reports."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "remove_input"
    ]
   },
   "outputs": [],
   "source": [
    "import altair as alt\n",
    "import datapane as dp\n",
    "from vega_datasets import data\n",
    "\n",
    "df = data.iris()\n",
    "\n",
    "plot_base = alt.Chart(df).mark_point().interactive()\n",
    "\n",
    "dp.Group(\n",
    "    \"Iris analysis\",\n",
    "    dp.Select(\n",
    "       dp.DataTable(df, label='Data'),\n",
    "       dp.Group(\n",
    "           dp.Plot(plot_base.encode(x='sepalLength', y='sepalWidth', color='species')),\n",
    "           dp.Plot(plot_base.encode(x='petalLength', y='petalWidth', color='species')),\n",
    "           columns=2,\n",
    "           label='Plots'\n",
    "       )\n",
    "    )\n",
    ")"
   ]
  },
  {
   "attachments": {},
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "This includes columns:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "dp.Group(\n",
    "    dp.BigNumber(heading=\"Left\", value=\"1234\"),\n",
    "    dp.BigNumber(heading=\"Middle\", value=\"4321\"),\n",
    "    dp.BigNumber(heading=\"Right\", value=\"2314\"),\n",
    "    columns=3,\n",
    ")"
   ]
  },
  {
   "attachments": {},
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Interactive tabs:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "dp.Select(\n",
    "    blocks=[\n",
    "        dp.Text(\"Hello World 1\", label=\"Page 1\"),\n",
    "        dp.Text(\"Hello World 2\", label=\"Page 2\"),\n",
    "        dp.Text(\"Hello World 3\", label=\"Page 3\"),\n",
    "    ]\n",
    ")"
   ]
  },
  {
   "attachments": {},
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "And [many other](#available-blocks) supported layout blocks.\n",
    "\n",
    "## Nesting\n",
    "\n",
    "Layout blocks can be arbitrarily nested, allowing you to create complex user interfaces."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "dp.Group(\n",
    "    dp.Text(\"This is the left side of a two-column layout\"),\n",
    "    dp.Group(\n",
    "        dp.Text(\"This is the right side of a two-column layout\"),\n",
    "        dp.Text(\"Below we have three tabs with different content\"),\n",
    "        dp.Select(\n",
    "            blocks=[\n",
    "                dp.Text(\"Hello World 1\", label=\"Page 1\"),\n",
    "                dp.Text(\"Hello World 2\", label=\"Page 2\"),\n",
    "                dp.Text(\"Hello World 3\", label=\"Page 3\"),\n",
    "            ]\n",
    "        ),\n",
    "    ),\n",
    "    columns=2,\n",
    ")"
   ]
  },
  {
   "attachments": {},
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Available Blocks\n",
    "\n",
    "Check out more layout block examples in the API Reference:\n",
    "\n",
    "  - [`dp.Group`](/reference/layout-blocks/group/)\n",
    "  - [`dp.Page`](/reference/layout-blocks/page/)\n",
    "  - [`dp.Select`](/reference/layout-blocks/select/)\n",
    "  - [`dp.Toggle`](/reference/layout-blocks/toggle/)"
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}
